<template>
  <div class="new">
    <van-nav-bar
      title="标题"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    />

    <div class="add">
      <div class="who">
        联系人<input type="text" placeholder="姓名" v-model="name" />
      </div>
      <div class="sex">
        <span class="boy">男</span><span class="girl">女</span>
      </div>
      <div class="who">
        电话<input type="text" placeholder="手机号码" v-model="phone" />
      </div>
      <div class="who">
        地址<input type="text" placeholder="选择收货地址" v-model="address" />
      </div>
      <div class="who">
        门牌号<input type="text" placeholder="例：5号楼203室" v-model="home"/>
      </div>
      <button @click="add()">保存并使用</button>
    </div>
  </div>
</template>

<script>
import { Toast } from "vant";
import { address_add } from "../api";
export default {
  data() {
    return {
      name: "",
      address: "",
      phone: "",
      home:"",
    };
  },
  methods: {
    onClickLeft() {
      this.$router.push("/address");
    },
    add() {
      var userId = JSON.parse(localStorage.getItem("userinfo")).id;
      if (this.phone && this.address && this.name && this.home) {
        // console.log({userid:userId,phone:this.phone,name:this.name,address:this.address+this.home});
        address_add({userid:userId,phone:this.phone,name:this.name,address:this.address+this.home}).then((res) => {
          // console.log(res.data.code);
          if (res.data.code==200) {
            this.$router.push('/address')
          }
        });
      } else {
        Toast("不能为空");
      }
    },
  },
  mounted() {},
};
</script>

<style scoped>
.add {
  width: 100%;
  height: 300px;
}
.who {
  width: 95%;
  margin: auto;
  height: 30px;
  font-size: 18px;
  margin-top: 20px;
  border-bottom: 1px solid #eee;
}
input {
  width: 70%;
  margin-left: 30px;
  border: none;
  color: #e0e0e0;
  font-size: 14px;
}
.sex {
  width: 250px;
  height: 30px;
  margin-left: 100px;
  margin-top: 30px;
}
.boy {
  display: inline-block;
  width: 100px;
  text-align: center;
  line-height: 30px;
  height: 30px;
  border: 1px solid #eee;
  margin-bottom: 10px;
}
.girl {
  display: inline-block;
  width: 100px;
  text-align: center;
  line-height: 30px;
  height: 30px;
  border: 1px solid #eee;
  margin-left: 20px;
  margin-bottom: 10px;
}
.girl:hover {
  background-color: lightblue;
}
.boy:hover {
  background-color: lightblue;
}
button {
  width: 95%;
  height: 50px;
  background-color: plum;
  text-align: center;
  color: white;
  line-height: 50px;
  display: block;
  margin: 20px auto;
  border: none;
}
</style>